<template>
<view class="template-set">
  <!-- 顶部自定义导航 -->
  <tn-nav-bar fixed alpha customBack>
    <view slot="back" class='tn-custom-nav-bar__back'
          @click="goBack">
      <text class='icon tn-icon-left-arrow'></text>
    </view>
  </tn-nav-bar>

  <view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

    <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="wxUserAvatarModal = true">
      <view class="justify-content-item">
        <view class="tn-text-bold tn-text-lg">
          头像
        </view>
      </view>
      <view class="justify-content-item tn-text-lg tn-color-grey">
        <tn-avatar size="lg" :src="`${oss.endpoint}/${oss.bucket}/${vuex_user.avatar}`"></tn-avatar>
      </view>
    </view>

    <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="wxUserNicknameModal = true">
      <view class="justify-content-item">
        <view class="tn-text-bold tn-text-lg">
          昵称
        </view>
      </view>
      <view class="justify-content-item tn-text-lg tn-color-grey">
        <view>
            {{ vuex_user.nickname || '未设置' }}
          <text class="tn-icon-right tn-margin-xs tn-padding-top"/>
        </view>
      </view>
    </view>

    <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
      <view class="justify-content-item">
        <view class="tn-text-bold tn-text-lg">
          账号
        </view>
      </view>
      <view class="justify-content-item tn-text-lg tn-color-grey">
        <view>
          {{ vuex_user.username }}
          <text class="tn-icon-right tn-margin-xs tn-padding-top"/>
        </view>
      </view>
    </view>

    <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
      <view class="justify-content-item">
        <view class="tn-text-bold tn-text-lg">
          手机号
        </view>
      </view>
      <view class="justify-content-item tn-text-lg tn-color-grey">
        <view>
          {{ vuex_user.phone }}
          <text class="tn-icon-right tn-margin-xs tn-padding-top"/>
        </view>
      </view>
    </view>

  </view>
  <!-- #ifdef MP-WEIXIN -->
  <wx-user-avatar
          v-model="wxUserAvatarModal"
          @updated="updatedUserAvatar"
          @cancel="wxUserAvatarModal = false"
  ></wx-user-avatar>
  <!-- #endif -->
  <wx-user-nickname
          v-model="wxUserNicknameModal"
          @updated="updatedNickname"
          @cancel="wxUserNicknameModal = false"
  ></wx-user-nickname>
</view>
</template>

<script>
import { mapState } from 'vuex'
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import WxUserAvatar from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-avatar.vue'
import WxUserNickname from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-nickname.vue'
import { reset as resetApi, findInfo } from "@/api/system/self";
import { uploadFile } from "@/api/storage/oss";
import { oss } from '@/config/config.json'

export default {
  name: 'userdetail',
  mixins: [template_page_mixin],
  components: { WxUserAvatar, WxUserNickname },
  data(){
    return {
      wxUserAvatarModal: false,
      wxUserNicknameModal: false,
      oss
    }
  },
  computed: {
    ...mapState(['vuex_user']),
  },
  methods: {
    tn(url) {
      uni.navigateTo({
        url,
      });
    },
    // 获取到的用户头像
    async updatedUserAvatar(avatar) {
      try {
        uni.showLoading({title: '正在更新信息...'})
        const { data: _avatar } = await uploadFile(avatar)
        avatar = _avatar.key
        await resetApi({avatar: avatar})
        const { data: self } = await findInfo()
        this.$t.vuex('vuex_user', self)
      } finally {
        this.wxUserAvatarModal = false
        uni.hideLoading()
      }
    },
    // 获取到的用户昵称
    async updatedNickname(nickname) {
      try {
        uni.showLoading({title: '正在更新信息...'})
        await resetApi({nickname: nickname})
        const { data: self } = await findInfo()
        this.$t.vuex('vuex_user', self)
      } finally {
        this.wxUserNicknameModal = false
        uni.hideLoading()
      }

    }
  }
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}


/* 间隔线 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #F8F9FB;
}

.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}



</style>
